<template>
  <div >
    <el-table
      :data="tableData"
      style="width: 100%"
      :row-class-name="tableRowClassName">
      <el-table-column
        prop="id"
        label="id"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>

    <el-pagination
      background
      layout="prev, pager, next"
      :total="1000"
      align="right"
      :current-page="pagesize"
      :page-size="currentPage"
      @current-change="goPage"

    >
    </el-pagination>



  </div>
</template>

<script>
export default {
  name: 'user2',
  data () {
    return {
      tableData: [],
      totals:0,
      currentPage: 1,
      pagesize:10
    }
  },
  methods:{
    getUser3(){
      let param = {"currentPage":this.currentPage,"pageSize":this.pagesize}
      this.$http.post("/user/list",param)
        .then(result=>{
          console.log(result.data.data)
          this.tableData = result.data.data;

        }).catch(result=>{
        alert("请求失败！")
      })
    },
    goPage(currentPage){
      console.log(currentPage)

      this.currentPage = currentPage;
      this.getUser3();
    },
    tableRowClassName({row, rowIndex}) {
      if (rowIndex%2 === 1) {
        return 'warning-row';
      } else if (rowIndex%2 === 0) {
        return 'success-row';
      }
      return '';
    }
  },
  mounted() {
    this.getUser3();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.el-table .warning-row {
  background: #fde6f5;
}

.el-table .success-row {
  background: #1dd252;
}
</style>
